<template>
  <div class="content-wrap">
    <table-page
      :fit="true"
      :columns="tableColums"
      :value="tableData"
      :total="total"
      :pageNum="pageNum"
      :pageSize="pageSize"
      :loading="loading"
      @on-change-page="onChangePage"
      @on-row-dblclick="onRowDblclick"
      :stripe="false"
      size="small"
      :border="false"
      :no-data-text="tableHint"
    >
      <Form slot="search-bar" :model="formCustom" inline ref="formCustom">
        <FormItem prop="meterId">
          <Input
            type="text"
            placeholder="表ID"
            v-model.trim="formCustom.meterId"
            style="width: 80px"
          />
        </FormItem>
        <FormItem prop="meterGasClass">
          <Select
            v-model="formCustom.meterGasClass"
            placeholder="用气性质"
            style="width: 120px"
          >
            <Option
              v-for="(type, index) in gasClassList"
              :key="index"
              :value="type.value"
            >{{type.value}}</Option>
          </Select>
        </FormItem>
        <FormItem prop="rangTime">
          <DatePicker type="daterange" :clearable="false" split-panels v-model="rangTime" placeholder="时间范围"></DatePicker>
        </FormItem>
        <FormItem>
          <Button icon="ios-search" type="info" @click="handleSubmit" :loading="searchLoading">查询</Button>
          <Button icon="ios-refresh" type="primary" @click="handleReset('formCustom')" style="margin-left: 8px">重置</Button>
        </FormItem>
      </Form>
    </table-page>
    <Modal
      v-model="showTreeFlag"
      class="tree-modal"
      title="详情"
      @on-cancel="onTreeCancel"
      width="96%"
      :styles="{top: '30px', height: '85%'}"
    >
      <div :is="userAndMeterInfoTpl" :content="meterDetailData" :currentMeterId="currentMeterId"></div>
      <div slot="footer">
        <Button @click="onTreeCancel" ghost>关闭</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import dayjs from 'dayjs'
import { keys, each, isEmpty, isNumber } from 'lodash'
import { tableList, meterGasClass, getMeterUnitDetail } from '@/api/gasSurveyQuery'
import tableMixin from '@/mixins/table'
import tableColums from './tableColums'

export default {
  name: 'GasSurveyQuery',
  mixins: [tableMixin],
  components: {
    UserAndMeterDetailETree: () => import('@/commons/UserAndMeterDetailETree')
  },
  data () {
    return {
      searchLoading: false,
      tableHint: '',
      loading: false,
      showTreeFlag: false,
      formCustom: {
        meterId: undefined,
        meterGasClass: undefined,
        startTime: undefined,
        endTime: undefined
      },
      tableData: [],
      pageNum: 1,
      pageSize: 20,
      total: 0,
      rangTime: undefined,
      gasClassList: [],
      currentMeterId: undefined,
      meterDetailData: null,
      userAndMeterInfoTpl: null
    }
  },
  computed: {
    tableColums() {
      return tableColums
    }
  },
  created () {
    this.getMeterGasClass()
  },
  activated() {
    this.loadAjax()
  },
  methods: {
    /**
     * 处理区间时间
     * @param  {[type]} date [description]
     * @return {[type]}      [description]
     */
    modifyPickerTime (pickerData = []) {
      let [startDate, endDate] = pickerData
      if (startDate) {
        startDate = dayjs(startDate).format('YYYY-MM-DD')
      } else {
        startDate = undefined
      }
      if (endDate) {
        endDate = dayjs(endDate).format('YYYY-MM-DD')
      } else {
        endDate = undefined
      }
      return [startDate, endDate]
    },
    /**
     * 筛选条件去除空值
     * @param  {[type]} filterData [description]
     * @return {[type]}            [description]
     */
    modifyFileterData (filterData) {
      const keyList = keys(filterData)
      const newData = {}
      each(keyList, item => {
        if (isNumber(filterData[item]) || !isEmpty(filterData[item])) {
          newData[item] = filterData[item]
        }
      })

      return newData
    },
    /**
     * 查询
     * @return {[type]} [description]
     */
    handleSubmit () {
      this.searchLoading = true
      const [startTime, endTime] = this.modifyPickerTime(this.rangTime)
      this.formCustom.startTime = startTime
      this.formCustom.endTime = endTime
      this.pageNum = 1
      this.loadAjax()
    },
    /**
     * 重置搜索
     * @return {[type]} [description]
     */
    handleReset (form) {
      this.rangTime = undefined
      this.$refs[form].resetFields()
      this.formCustom = {
        meterId: undefined,
        meterGasClass: undefined,
        startTime: undefined,
        endTime: undefined
      }
      this.loadAjax()
    },
    /**
     * 获取表格数据
     * @return {[type]} [description]
     */
    loadAjax () {
      const { pageNum, pageSize } = this
      this.tableHint = '正在刷新…'
      this.loading = true
      const newData = this.modifyFileterData(this.formCustom)
      tableList({ ...newData, pageNum, pageSize })
        .then(res => {
          this.searchLoading = false
          if (res.date && res.date.list && res.date.list.length > 0) {
            const { total, list, pageNum, pageSize } = res.date
            this.total = total
            this.pageNum = pageNum
            this.pageSize = pageSize
            this.tableData = list
          } else {
            this.tableData = []
            this.tableHint = '暂无数据'
          }
        })
        .catch(() => {
          this.tableHint = '暂无数据'
        }).finally(() => {
          this.pageNumFlag = false
          this.loading = false
        })
    },
    /**
     * 获取用气性质
     * @return {[type]} [description]
     */
    getMeterGasClass () {
      meterGasClass()
        .then(res => {
          if (res.date && res.date.length >= 0) {
            this.gasClassList = res.date
          } else {
            this.gasClassList = []
          }
        })
        .catch(() => {
          this.gasClassList = []
        })
    },
    /**
     * desc: 表具详情模态框关闭
     * param {type}
     * return {type} void
     */
    onTreeCancel () {
      this.showTreeFlag = false
      this.meterDetailData = null
      this.userAndMeterInfoTpl = null
    },
    /**
     * @msg: 双击行数据
     * @param {type}
     * @return:
     */
    onRowDblclick (row = {}, index) {
      this.$Loading.start()
      const { meterId } = row
      this.currentMeterId = meterId
      getMeterUnitDetail(meterId)
        .then(res => {
          if (res.date) {
            this.$Loading.finish()
            this.meterDetailData = res.date
            this.userAndMeterInfoTpl = 'UserAndMeterDetailETree'
            this.showTreeFlag = true
          }
        })
    }
  }
}
</script>
<style lang="less" scoped>
@import './index.less';
</style>
